<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 120px;
            height: 100px;
            border: 1px solid black;
            padding: 30px;
        }
    </style>
</head>

<body>


    <div id="box">
        <span>当前计数:{{sum}}</span>
        <br>
        <br>
        <br>
        <!-- @语法糖相当于v-on -->
        <button @mousemove="up">+</button>&nbsp;&nbsp;<button v-on:click="down">-</button>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    new Vue({
        el: '#box',
        data: {
            sum: 0,
        },
        methods: {
            up: function() {
                this.sum++;
                console.log('增加了');
            },
            down: function() {
                this.sum--;
                console.log('减少了');
            }
        }



    });
</script>

</html>